<template>
  <div class="dpm">
    <PageTitle :title="'AI Application Configuration'"></PageTitle>
    <div class="operate-main">
      <div class="step-l">
        <h2>Cluster</h2>
        <div style="text-align: center; margin:40px" v-if="cluster.cdata.length === 0">
          <n-spin size="large"/>
        </div>
        <Cluter
            v-for="item in cluster.cdata"
            :data="item" :key="item.id"
            :class="item.id === selectCluster?'cluster cluster_select':'cluster'"
            @click="getDPUrl(`${item.cluster_info.host}`, item.id)"
        />
      </div>
      <div class="step-r">
        <h2>Serve Config Preview</h2>
        <n-input
            v-model:value="config"
            type="textarea"
            placeholder=""
            style="height: 60vh;"
            class="config-ipt"
        />
      </div>
    </div>
    <div class="operate-btm">
      <n-button style="width: 120px;height: 46px;font-size: 16px" @click="submit" :loading="submitLoading">Submit</n-button>
    </div>
  </div>
</template>

<script setup>
import PageTitle from '@/components/PageTitle'
import { onMounted, ref, reactive } from "vue";
import { NSpin, NInput, NButton } from 'naive-ui'
import fiatBE from "@/api/fiatBE";
import Cluter from '@/components/modelD/dispatcher/Cluster'
import { useMessage } from 'naive-ui'
const message = useMessage()

let config = ref(null)

let cluster = reactive({
  cdata: []
})
let selectCluster = ref(null)


let submitLoading = ref(false)
function submit() {
  submitLoading.value = true
  console.log(clusterUrl.value)
  fiatBE.post(`/serve/deploy?cluster=http://${clusterUrl}:52365`, JSON.parse(config.value)).then(() => {
  //  成功后

  }).finally(() => {
    message.success('Success')
    submitLoading.value = false
    getAppData()
  })
}

function getAppData() {
  fiatBE.get('/cluster/fetch').then(res => {
    cluster.cdata = res.data
    selectCluster.value = res.data[0].id
    clusterUrl.value = res.data[0].cluster_info.host
  })
}

let clusterUrl = ref(null)
function getDPUrl(url, id) {
  clusterUrl.value = url
  selectCluster.value = id
  console.log(clusterUrl.value)
}

onMounted(() => {
  getAppData()
})

</script>

<style scoped>
::-webkit-scrollbar{
  width: 6px;
  height: 5px;
  background-color: #ffffff;
  display: block;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0);
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0);
  border-radius: 10px;
  background-color: #ffffff;
}

::-webkit-scrollbar-thumb{
  border-radius: 6px;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, .1);
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, .1);
  background-color: rgba(210,210,210, 1);
}

.dpm {
  padding: 0 var(--lrWhite);
}
.operate-main {
  display: flex;
  align-items: flex-start;
}
.step-l {
  width: 20%;
  padding-right: var(--lrWhite);
  height: 80vh;
  overflow: scroll;
  margin-right: 6%;
}
.step-r {
  flex: 1;
}
.config-ipt {
  border-radius: 10px;
}
.operate-btm {
  text-align: center;
}
.cluster:hover {
  cursor: pointer;
}
.cluster_select {
  border: 2px solid rgb(102,26,230) !important;
}
</style>
